import React, { memo } from "react";
import { useDrop } from "react-dnd";
import "./index.less";
import { DragItem } from "../DragItem/index.jsx";

export const DragArea = memo(function Lane({
  accept,
  desc,
  dropItems,
  areaTotal,
  onDrop,
  xInfo,
}) {
  const [{ isOver, canDrop }, drop] = useDrop({
    accept,
    drop: onDrop,
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  });
  const isActive = isOver && canDrop;
  let backgroundColor = "#FEFFFE";
  if (isActive) {
    backgroundColor = "rgba(63, 96, 252, 0.1)";
  }
  return (
    <div className="drag-area-content" style={{ width: 100 / areaTotal + "%" }}>
      <div
        className="drag-area-bottom"
        ref={drop}
        style={{ backgroundColor }}
        data-testid="dustbin"
      >
        {dropItems.length > 0 &&
          dropItems.map((val) => {
            return (
              <DragItem
                id={val}
                content={
                  xInfo?.filter((value) => value.id === val)?.[0]
                    .content
                }
                isDropped={val}
                type="text"
                checked
                key={val}
              />
            );
          })}
        {isActive && <div className="temp-drag-item" />}
        <div className="bottom-place-area" />
      </div>
    </div>
  );
});
